RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / admin / resources / views / School / Statistics /
Filename : attendance.blade.php
back
@extends('Admin.layout.main')
@section('content')

@section('pagestylesheet')

@stop
 <!-- BEGIN: Page Main-->
    <div id="main">
      <div class="row">
        <div class="col s12">
          <div class="container">
            <div class="section">
               <!--card stats start-->
               <div id="card-stats" class="pt-0">
                  <div class="row">
                    <div class="col s6">
                        <div class="card animate fadeRight">
                            <div class="padding-4">
                                <div>
                                    <canvas id="attendance-15d"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Weekly Attendance Chart -->
                    <div class="col s6">
                        <div class="card animate fadeRight">
                            <div class="padding-4">
                                <canvas id="attendance-weekly"></canvas>
                            </div>
                        </div>
                    </div>
                  </div>
                  <div class="row">
                    <!-- Monthly Attendance Chart -->
                    <div class="col s6">
                        <div class="card animate fadeRight">
                            <div class="padding-4">
                                <canvas id="attendance-monthly"></canvas>
                            </div>
                        </div>
                    </div>
                  </div>
               </div>
               <!--end card stats-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END: Page Main-->

@endsection

@section('pagescript')
<script src="{{ asset('app-assets/js/chart-v4.4.3.js') }}"></script>

<script>
    const ctxAttendance15Days = document.getElementById('attendance-15d').getContext('2d');

    const labels = @json($dates);
    const presentData = @json($presentCounts);
    const absentData = @json($finalAbsentCounts);

    const chart15Days = new Chart(ctxAttendance15Days, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
            {
                label: 'Present',
                data: presentData,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            },
            {
                label: 'Absent',
                data: absentData,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }
            ]
        },
        options: {
            plugins: {
            title: {
                    display: true, // Enables the title
                    text: 'Attendance Over the Last 15 Days', // Title text
                    font: {
                        size: 16, // Font size
                        weight: 'bold' // Font weight
                    },
                    padding: {
                        top: 5,
                        bottom: 5 // Adds spacing around the title
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    // stacked:true
                },
                x:{
                    // stacked: true
                }
            }
        }
    });
</script>

<script>
    // Weekly Attendance Chart
    const ctxWeekly = document.getElementById('attendance-weekly').getContext('2d');
    const weeklyLabels = @json(array_values($weeklyData['labels']));
    const weeklyData = @json(array_values($weeklyData['data']));
    const weeklyChart = new Chart(ctxWeekly, {
        type: 'bar',
        data: {
            labels: weeklyLabels,
            datasets: [
                {
                    label: 'Present',
                    data: weeklyData.map(data => data.presentPercentage),
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Absent',
                    data: weeklyData.map(data => data.absentPercentage),
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Holiday',
                    data: weeklyData.map(data => data.holidayPercentage),
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
        responsive: true,
        scales: {
            y: {
                stacked: true,
                ticks: {
                    beginAtZero: true,
                    callback: function(value) {
                        return value + '%'; // Display percentage on the y-axis
                    }
                },
                title: {
                    display: true,
                    text: 'Attendance Percentage'
                }
            },
            x: {
                stacked: true
            }
        },
        plugins: {
                tooltip: {
                    callbacks: {
                        // Customize the tooltip to show percentages
                        label: function(context) {
                            // const total = context.dataset.data.reduce((acc, val) => acc + val, 0);
                            // const percentage = (context.raw / total) * 100;
                            // return context.dataset.label + ': ' + percentage.toFixed(2) + '%';
                            return context.dataset.label + ': ' + context.raw + '%';
                        }
                    }
                },
                title: {
                    display: true,
                    text: 'Weekly Attendance Percentage Over Last 15 Weeks'
                }
            }
        }
    });
</script>
<script>
    // Monthly Attendance Chart
    const ctxMonthly = document.getElementById('attendance-monthly').getContext('2d');
    const monthlyLabels = @json(array_values($monthlyData['labels']));
    const monthlyData = @json(array_values($monthlyData['data']));
    const monthlyChart = new Chart(ctxMonthly, {
        type: 'bar',
        data: {
            labels: monthlyLabels,
            datasets: [
                {
                    label: 'Present',
                    data: monthlyData.map(data => data.presentPercentage),
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Absent',
                    data: monthlyData.map(data => data.absentPercentage),
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Holiday',
                    data: monthlyData.map(data => data.holidayPercentage),
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
        responsive: true,
        scales: {
            y: {
                stacked: true,
                ticks: {
                    beginAtZero: true,
                    callback: function(value) {
                        return value + '%'; // Display percentage on the y-axis
                    }
                },
                title: {
                    display: true,
                    text: 'Attendance Percentage'
                }
            },
            x: {
                stacked: true
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    // Customize the tooltip to show percentages
                    label: function(context) {
                        // const total = context.dataset.data.reduce((acc, val) => acc + val, 0);
                        // const percentage = (context.raw / total) * 100;
                        // return context.dataset.label + ': ' + percentage.toFixed(2) + '%';
                        return context.dataset.label + ': ' + context.raw + '%';
                    }
                }
            },
            title: {
                display: true,
                text: 'Monthly Attendance Percentage Over Last 12 Months'
            }
        }
    }
    });

</script>

@stop